<template>
  <a-modal
    title="批量修改"
    v-model:visible="visible"
    unmount-on-close
    width="85vw"
    :bodyStyle="{ 'padding-bottom': '0', 'max-height': 'calc(100vh - 210px)' }"
  >
    <page-form :model="form" ref="formRef" :rules="rules" layout="vertical">
      <div class="list-wrapper" v-if="form.modifyQueryList.length">
        <div class="card-wrapper" v-for="(item, index) in form.modifyQueryList" :key="index">
          <div class="licenseNo">{{ item.name }}</div>
          <page-form-item
            :field="`modifyQueryList[${index}].licenseNoColor`"
            :rules="{ required: true, message: '请选择' }"
            label="车牌颜色"
            class="licenseNoColor"
          >
            <a-select v-model="item.licenseNoColor" placeholder="请选择" popup-container=".card-wrapper">
              <a-option v-for="i in carSyncHrhcDict.licenseNoColorList" :key="i.value" :value="i.value" :label="i.label" />
            </a-select>
          </page-form-item>
        </div>
      </div>
      <a-empty v-else />
    </page-form>
    <template #footer>
      <a-button @click="visible = false">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="submitFn">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CarInfoBatchModal">
  import { ref, provide } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import { getBatchSyncModify, getHrhcList } from '@/api/asset/equipment'
  import { Message } from '@arco-design/web-vue'

  const visible = ref(false)
  const formRef = ref()
  const okLoading = ref(false)
  const emits = defineEmits(['ok'])

  let form = ref({
    modifyQueryList: [],
  })

  const show = () => {
    visible.value = true
    const param = {
      pageSize: 30,
      pageNumber: 1,
      hrhcSyncStatusList: [20], // 待修改
    }
    getCarDetailFn(param)
  }

  // 获取车辆
  const getCarDetailFn = (param) => {
    let fetch = getHrhcList
    fetch(param).then((res) => {
      form.value.modifyQueryList = res.result.data.map((item) => {
        return {
          id: item.id,
          name: item.licenseNo,
          licenseNoColor: item.licenseNoColor,
        }
      })
    })
  }

  const rules = {}
  const carSyncHrhcDict = usePageDict('carSyncHrhcDict')
  provide('dict', carSyncHrhcDict)
  provide('form', form)

  // 提交
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        const param = [...form.value.modifyQueryList]
        okLoading.value = true
        getCmodifyFn({ modifyQueryList: param })
      }
    })
  }
  // 修改提交
  const getCmodifyFn = (param) => {
    getBatchSyncModify(param)
      .then((res) => {
        Message.success(res.message)
        emits('ok')
        visible.value = false
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-trigger-popup-wrapper) {
    margin-top: 20px;
    margin-left: 20px;
  }

  .list-wrapper {
    display: flex;
    flex-wrap: wrap;
    .card-wrapper {
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #e5e6eb;
      margin-bottom: 20px;
      margin-right: 10.2%;
      width: 26.5%;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .licenseNo {
        font-weight: 500;
        font-size: 16px;
        color: #1d2129;
        line-height: 24px;
        background: #f2f3f5;
        padding: 6px 16px;
      }
      .licenseNoColor {
        margin-top: 12px;
        width: 100%;
        padding: 0 16px;
      }
    }
  }
</style>
